import 'package:flutter/material.dart';
import 'package:flutterdemo/day02/01_statelesswidget.dart';
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // 启动要显示的界面
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("图标组件示例"),
      ),
      body: MyHomeBody(),
    );
  }
}

class MyHomeBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      crossAxisAlignment: CrossAxisAlignment.end,
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Expanded(
          flex: 1,
          child: Container(color: Colors.red, height: 60),
        ),
        Container(color: Colors.blue, width: 80, height: 80),
        Container(color: Colors.green, width: 70, height: 70),
        Expanded(
          flex: 1,
          child: Container(color: Colors.yellow, height: 100),
        )
      ],
    );
  }
}

class HomeContent1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      /*
      - mainAxisAlignment
        start: 主轴的开始位置挨个摆放元素
        end: 主轴结束位置挨个摆放元素
        center: 主轴的中心点对齐
        spaceBetween: 左右两边的距离为 0，其他元素之间平分间距
        spaceAround: 左右两边的距离是其他元素之间的距离的一半
        spaceEvenly: 所有的间距平分空间
      - crossAxisAlignment
        start: 交叉轴的起始位置对齐
        end: 交叉轴的结束为止对齐
        center: 中心点对齐(没默认值)
        stretch: 基线对齐(必须有文本的时候才起效果)
        baseline: 先Row占据交叉轴尽可能大的空间，将左所有的子Widget交叉轴的高度，拉伸到最大
      */
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      crossAxisAlignment: CrossAxisAlignment.end,
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Container(color: Colors.red, width: 60, height: 60),
        Container(color: Colors.blue, width: 80, height: 80),
        Container(color: Colors.green, width: 70, height: 70),
        Container(color: Colors.orange, width: 100, height: 100),
      ],
    );
  }
}
